<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=iso-8859-1" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Calendrier</title>
	<link href="/TFE_Gestidot/CSS/global.css" media="all" rel="stylesheet" type="text/css"/>
	<link href="/TFE_Gestidot/CSS/valerio.css" media="all" rel="stylesheet" type="text/css"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="icon" type="image/png" href="/TFE_Gestidot/IMG/favicon.png">	
		
		<link rel="stylesheet" type="text/css" href= "/TFE_Gestidot/CSS/bootstrap.min.css" media="all" />
		<link rel="stylesheet" type="text/css" href= "/TFE_Gestidot/CSS/bootstrap-theme.min.css" media="all" />
		<!-- FIN Style bootstrap twitter -->
	
		<link rel="stylesheet" type="text/css" href="/TFE_Gestidot/CSS/jquery-ui-1.10.3.custom.min.css" media="all" />
		
		<link rel="stylesheet" type="text/css" href="/TFE_Gestidot/CSS/atc.css" media="all" />
		<!-- Scripts -->
		<script type="text/javascript" src="/TFE_Gestidot/JS/jquery.min.js" ></script>
		<script type="text/javascript" src="/TFE_Gestidot/JS/jquery.ui.min.js" ></script>
		
    	

    	<!-- JS bootstrap twitter -->
    	<script type="text/javascript" src="/TFE_Gestidot/JS/bootstrap.min.js"></script>
    	
    	<script type="text/javascript" src="/TFE_Gestidot/JS/atc.js"></script>
</head>

<body>
	<div id="bloc_page">
		<div id="tabs-content">
 			<form id="newPlanningUF" class="form" action="/TFE_Gestidot/newPlanningUF" method="post">
	 		<fieldset>
			<legend>Planning UF</legend>
 				<fieldset class="fsNewPlanningUF">	
 				<legend>Encodage d'un nouveau planning UF</legend>
				<div id="formulaire">
 					<div id="voletGauche">
		 				<!-- Choix de l'UF --> 
		 				
		 				<label for="uFOrga"><b>UF Organisée</b></label><br />
		 				<select name="uFOrga" id="uFOrga" class="inputToValidate" required>
		 					<%--<c:forEach var="i" items="${prof}"> --%>
							<option value=""><c:out value="${i.nom}" /> </option>
							<%--</c:forEach> --%>
						</select>
						
							<!-- Choix d'un professeur, du local et d'une période-->
		 					<jsp:include page="listProfLocal.jsp" />

						<!-- Choix d'un horaire et d'une section -->
						<jsp:include page="listHoraireSection.jsp" />
						<!-- Affichage du nombre de cours et de périodes -->
						<table>
							<tbody>
								<tr>
									<td><label for="nbrCours"><b>Nombre de cours : </b></label></td>
									<td><label for="nbrPeriodes"><b>Nombre de périodes : </b></label></td>
									<td><label for="conv"><b>Convention : </b></label></td>
								</tr>
								<tr>
									<td><textarea id="nbrCours" name="nbrCours"></textarea></td>
									<td><textarea id="nbrPeriodes" name="nbrPeriodes"></textarea></td>
									<td>
										<!-- Sélection du type de convention -->
										<ul>
											<li> <input type ="radio" name="conv" value="0"> 0 </li> 
											<li> <input type ="radio" name="conv" value="50"> 50 </li>
											<li> <input type ="radio" name="conv" value="100"> 100 </li> 
										</ul> 								
									</td>
								</tr>
							</tbody>
						</table>
					</div> <!-- Fin de volet Gauche -->
				</div>	<!-- Fin de formulaire -->
				</fieldset>
		 	<p>* = Champs obligatoires | <img src="/TFE_Gestidot/IMAGES/rouge.png"> = Champs mal remplis | <img src="/TFE_Gestidot/IMAGES/vert.png"> = Champs bien remplis</p>
			</fieldset>
			<div id="boutons">
 				<input class="boutonForm" type="button" value="Reset" onclick=""/>
 				<input class="boutonForm" type="submit" value="Modifier" onclick=""/>
 				<input class="boutonForm" type="submit" value="Valider" onclick=""/>	
 			</div>	<!-- Fin de boutons -->
			</form>	
		</div> <!-- Fin de "tabs-content" -->
	</div> <!-- Fin de "bloc_page" -->
</body>
</html>